<template>
    <div class="box">
        <JsContentTitle :pageTitle="state.pageTitle" :buttonData="state.buttonData"></JsContentTitle>
        <div class="contentView">
            <JsTable :toolBar="toolBar" :total="state.totalCount" :dataSource="state.dataSource"
                :columns="state.columns" :refresh="state.refresh" @search="search">
                <template #search-last>
                    <el-button @click="reset" type="primary" size="small">重置</el-button>
                </template>
            </JsTable>
        </div>
    </div>
</template>
<script setup lang="ts">
import { getRecords, getUsers } from '@/api/login'
// 重置
const reset = () => {
    state.value.api = {
        username: '',
    }
}


onMounted(() => {
    getUsers().then((res: any) => {
        res.data.forEach((item: any) => {
            const user = { label: item, value: item }
            toolBar.value.input[0].options.push(user);
        })
    })
    state.value.refresh = 1
})

const search = (params: any) => {
    getRecords(params).then((res: any) => {
        state.value.dataSource = res.data.data
        state.value.totalCount = res.data.total
        state.value.refresh = 0
    })
}
const state = ref({
    buttonData: [],
    refresh: 0,
    totalCount: 0,
    pageTitle: '借阅日志',
    columns: {
        props: [
            {
                name: "书名",
                key: "book_name",
            },
            {
                name: "借阅人",
                key: "user_name",
            },

            {
                name: "借阅时间",
                key: "borrow_at",
            },
            {
                name: "作者",
                key: "author",
            },
            {
                name: "简介",
                key: "synopsis",
            },

            {
                name: "出版时间",
                key: "year_publication",
            },

        ],

    },
    dataSource: [],

} as any)

const toolBar = ref<any>({
    form: {
        username: '',
    },
    input: [
        {
            label: '借阅人',
            key: 'username',
            placeholder: '请输入',
            el: 'select',
            options: [],
        },
    ],
    btns: [
        {
            label: '查询',
            icon: 'Search',
            event: search
        },
        {
            label: '重置',
            icon: 'Pointer',
            event: () => {
                Object.keys(toolBar.value.form).forEach((key: string) => {
                    toolBar.value.form[key] = ''
                })
                state.value.refresh = 1
            },
        },

    ],
})
</script>

<style lang="scss" scoped>
*::-webkit-scrollbar {
    display: none;
    width: 10px;
}

.box {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;

    .contentView {
        background-color: white;
        border-radius: 5px;
        height: calc(100vh - 144px);
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
</style>